<template>
	<div class="matching">
		<TopInfo />
		<TopTabs @func="LoadValue" />
		<div class="content">
			<div class="filter-part">
				<div class="search-part">
					<el-input
						placeholder="请输入关键词搜索"
						v-model="keywords"
						prefix-icon="el-icon-search"
						class="input-with-select"
						@keyup.enter.native="SearchList()"
					>
						<el-button
							slot="append"
							type="primary"
							@click="SearchList()"
							>搜索</el-button
						>
					</el-input>
				</div>
				<div class="area">
					<div class="title fl">资源种类：</div>
					<ul class="area-list fl">
						<li
							:class="active == 1 ? 'active' : ''"
							@click="SelectRe(1)"
						>
							项目
						</li>
						<li
							:class="active == 2 ? 'active' : ''"
							@click="SelectRe(2)"
						>
							人才
						</li>
						<li
							:class="active == 3 ? 'active' : ''"
							@click="SelectRe(3)"
						>
							服务机构
						</li>
					</ul>
				</div>
				<div class="area">
					<div class="title fl">
						{{ this.IsJg ? "服务机构类型" : "所属领域" }}：
					</div>
					<el-select
						v-model="surveyValue"
						placeholder="请选择"
						v-if="!IsJg"
						@change="GetList"
						clearable
					>
						<el-option
							v-for="item in surveyList"
							:key="item.Id"
							:label="item.RealmName"
							:value="item.Id"
						>
						</el-option>
					</el-select>
					<el-select
						v-model="financeValue"
						placeholder="请选择"
						@change="GetList"
						clearable
						v-else
					>
						<el-option
							v-for="item in financeList"
							:key="item.TypeId"
							:label="item.TypeName"
							:value="item.TypeId"
						>
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="match-count">
				为你查找到<span>{{ count }}</span
				>条记录
			</div>
			<ul v-if="active == 1" class="matching-list">
				<li
					@click="ToResourceDetail(1, item.Id)"
					v-for="item in resourceData1"
					:key="item.Id"
				>
					<div class="line1">
						{{ item.ProName }}
						<span class="fr"
							><i
								:class="
									item.IsCollect
										? 'el-icon-star-on star'
										: 'el-icon-star-off star2'
								"
								@click.stop="Save(1, item.Id)"
							></i
						></span>
					</div>
					<div class="line2">联系人：{{ item.PersonName }}</div>
					<div class="line3">
						<span class="fl">联系电话：{{ item.Telphone }}</span>
						<span class="fr">{{ item.SendDate }}</span>
						<!-- <span class="fr"
              >匹配度：
              <i class="el-icon-star-on star"></i>
            </span> -->
					</div>
					<div class="line4">
						<span class="fl">状态：{{ item.Status }}</span>
					</div>
				</li>
			</ul>
			<ul v-if="active == 2" class="matching-list">
				<li
					@click="ToResourceDetail(2, item.Id)"
					v-for="item in resourceData2"
					:key="item.Id"
				>
					<div class="line1">
						{{ item.Pername
						}}<span class="fr"
							><i
								:class="
									item.IsCollect
										? 'el-icon-star-on star'
										: 'el-icon-star-off star2'
								"
								@click.stop="Save(2, item.Id)"
							></i
						></span>
					</div>
					<div class="line2">职位：{{ item.Postion }}</div>
					<!-- <div class="line3">
            <span class="fl">受理部门：湖南省科学技术厅</span>
          </div> -->
					<div class="line4">
						<span class="fl">电话：{{ item.Telphone }}</span>
						<span class="fr">{{ item.SendDate }}</span>
						<!-- <span class="fr"
              >匹配度：
              <i class="el-icon-star-on star"></i>
            </span> -->
					</div>
				</li>
			</ul>
			<ul v-if="active == 3" class="matching-list">
				<li
					@click="ToResourceDetail(3, item.Id)"
					v-for="item in resourceData3"
					:key="item.Id"
				>
					<div class="line1">
						{{ item.CompanyName
						}}<span class="fr"
							><i
								:class="
									item.IsCollect
										? 'el-icon-star-on star'
										: 'el-icon-star-off star2'
								"
								@click.stop="Save(3, item.Id)"
							></i
						></span>
					</div>
					<div class="line2">联系人：{{ item.PersonName }}</div>
					<div class="line3">
						<span class="fl">机构类型：{{ item.TypeName }}</span>
					</div>
					<div class="line4">
						<span class="fl">联系电话：{{ item.Telphone }}</span>
						<span class="fr">{{ item.SendDate }}</span>
						<!-- <span class="fr"
              >匹配度：
              <i class="el-icon-star-on star"></i>
            </span> -->
					</div>
				</li>
			</ul>
		</div>
		<BottomInfo />
	</div>
</template>

<script>
import BottomInfo from "../components/BottomInfo";
import TopInfo from "../components/TopInfo";
import TopTabs from "../components/TopTabs";
export default {
	name: "Resource",
	data() {
		return {
			keywords: "",
			active: 1,
			limit: 100,
			page: 1,
			count: 0,
			resourceData1: [],
			resourceData2: [],
			resourceData3: [],
			surveyList: [],
			surveyValue: "",
			financeValue: "",
			financeList: [],
			IsJg: false,
		};
	},
	methods: {
		SelectRe(n) {
			this.active = n;
			if (n == 3) {
				this.IsJg = true;
			} else {
				this.IsJg = false;
			}
			this.keywords = "";
			this.GetList();
		},
		LoadValue(data) {
			this.active = data;
			if (this.active == 3) {
				this.IsJg = true;
			}else{
        this.IsJg = false;
      }
			this.keywords = "";
			this.GetList();
		},
		ToResourceDetail(n, id) {
			let api = "";
			if (n == 1) {
				api = "ResourceDetailPro";
			} else if (n == 2) {
				api = "ResourceDetailPer";
			} else {
				api = "ResourceDetailFin";
			}
			this.$router.push({ name: api, params: { id } });
			this.$cookies.set("TopActive", 9);
		},
		GetList() {
			let url = "";
			let typeid = "";
			if (this.active == 1) {
				url = "/Resource/GetProjectList";
				typeid = this.surveyValue;
			} else if (this.active == 2) {
				url = "/Resource/GetPersonnelList";
				typeid = this.surveyValue;
			} else {
				url = "/Resource/GetFinanceList";
				typeid = this.financeValue;
			}
			this.$axios({
				url,
				method: "post",
				data: {
					limit: this.limit,
					page: this.page,
					userdata: this.$cookies.get("userdata"),
					title: this.keywords,
					typeid,
				},
				transformRequest: [
					function (data) {
						let ret = "";
						for (let it in data) {
							ret +=
								encodeURIComponent(it) +
								"=" +
								encodeURIComponent(data[it]) +
								"&";
						}
						return ret;
					},
				],
				headers: {
					"Content-Type":
						"application/x-www-form-urlencoded; charset=UTF-8",
				},
			})
				.then((res) => {
					//console.log(res.data.data);
					if (this.active == 1) {
						this.resourceData1 = res.data.data;
					} else if (this.active == 2) {
						this.resourceData2 = res.data.data;
					} else {
						this.resourceData3 = res.data.data;
					}
					this.count = res.data.count;
				})
				.catch((err) => {
					//console.log(err);
				});
		},
		GetSurvey() {
			let url = "/Resource/GetSurveyRealmList";
			this.$axios({
				url,
				method: "post",
				data: {},
				transformRequest: [
					function (data) {
						let ret = "";
						for (let it in data) {
							ret +=
								encodeURIComponent(it) +
								"=" +
								encodeURIComponent(data[it]) +
								"&";
						}
						return ret;
					},
				],
				headers: {
					"Content-Type":
						"application/x-www-form-urlencoded; charset=UTF-8",
				},
			})
				.then((res) => {
					// console.log(res.data.data);
					this.surveyList = res.data.data;
					// console.log(this.surveyList);
				})
				.catch((err) => {
					//console.log(err);
				});
		},
		GetFinance() {
			let url = "/Resource/GetFinanceTypeList";
			this.$axios({
				url,
				method: "post",
				data: {},
				transformRequest: [
					function (data) {
						let ret = "";
						for (let it in data) {
							ret +=
								encodeURIComponent(it) +
								"=" +
								encodeURIComponent(data[it]) +
								"&";
						}
						return ret;
					},
				],
				headers: {
					"Content-Type":
						"application/x-www-form-urlencoded; charset=UTF-8",
				},
			})
				.then((res) => {
					// console.log(res.data.data);
					this.financeList = res.data.data;
				})
				.catch((err) => {
					//console.log(err);
				});
		},
		Save(type, id) {
			let a = id;
			this.$axios({
				url: "/User/AddUserCollect",
				method: "post",
				data: {
					userdata: this.$cookies.get("userdata"),
					policyid: a,
					typeid: type,
				},
				transformRequest: [
					function (data) {
						let ret = "";
						for (let it in data) {
							ret +=
								encodeURIComponent(it) +
								"=" +
								encodeURIComponent(data[it]) +
								"&";
						}
						return ret;
					},
				],
				headers: {
					"Content-Type":
						"application/x-www-form-urlencoded; charset=UTF-8",
				},
			})
				.then((res) => {
					if (type == 1) {
						for (let i = 0; i < this.resourceData1.length; i++) {
							if (this.resourceData1[i].Id == a) {
								this.resourceData1[i].IsCollect =
									!this.resourceData1[i].IsCollect;
							}
						}
					} else if (type == 2) {
						for (let i = 0; i < this.resourceData2.length; i++) {
							if (this.resourceData2[i].Id == a) {
								this.resourceData2[i].IsCollect =
									!this.resourceData2[i].IsCollect;
							}
						}
					} else {
						for (let i = 0; i < this.resourceData3.length; i++) {
							if (this.resourceData3[i].Id == a) {
								this.resourceData3[i].IsCollect =
									!this.resourceData3[i].IsCollect;
							}
						}
					}
					this.$message({
						message: res.data.msg,
						type: "success",
					});
				})
				.catch((err) => {
					//console.log(err);
				});
		},
		SearchList() {
			this.GetList();
		},
	},
	mounted() {
		// console.log(this.$route.params.Type);
		//console.log(this.$route.params.Keywords);
		if (this.$route.params.Type) {
			this.active = this.$route.params.Type;
			if (this.active == 3) {
				this.IsJg = true;
			}
		}
		if (this.$route.params.Keywords) {
			this.keywords = this.$route.params.Keywords;
		}
		this.GetList();
		this.GetSurvey();
		this.GetFinance();
	},
	// created(){
	//   this.GetSurvey();
	// },
	components: {
		BottomInfo,
		TopInfo,
		TopTabs,
	},
};
</script>

<style scoped>
.matching {
	min-height: 800px;
}
.content {
	background-color: #f4f6fc;
	padding: 25px 0;
}
.filter-part {
	background-color: #fff;
	box-shadow: 0px 0px 9px 0px rgba(9, 90, 255, 0.05);
	margin: 0 auto;
	width: 1200px;
	padding: 25px;
	box-sizing: border-box;
	padding-bottom: 0;
}
.search-part {
	padding: 30px 280px;
	border-bottom: 1px solid #eeeeee;
}
.area,
.year {
	padding: 12px 0;
	border-bottom: 1px solid #eeeeee;
	box-sizing: border-box;
	overflow: hidden;
	color: #333;
	font-size: 14px;
}
.year {
	border-bottom: none;
}
.area .title,
.year .title {
	width: 120px;
	text-align: right;
	padding: 5px 8px;
	box-sizing: border-box;
}
.area-list,
.year-list {
	width: 1030px;
}
.area-list li,
.year-list li {
	float: left;
	cursor: pointer;
	margin-right: 20px;
	padding: 5px 8px;
}
.area-list li:last-child,
.year-list li:last-child {
	margin-right: 0;
}
.area-list li.active,
.year-list li.active {
	color: #fff;
	background-color: #095aff;
}
.area-list li:hover,
.year-list li:hover {
	color: #fff;
	background-color: #095aff;
}
.match-count {
	width: 1200px;
	margin: 25px auto;
	height: 50px;
	line-height: 50px;
	background: #ffffff;
	color: #333;
	font-size: 14px;
	text-align: center;
}
.match-count span {
	color: #095aff;
	font-weight: bold;
	margin: 0 5px;
}
.matching-list {
	width: 1200px;
	background: #ffffff;
	box-shadow: 0px 0px 9px 0px rgba(9, 90, 255, 0.05);
	margin: 0 auto;
	padding: 25px 35px;
	box-sizing: border-box;
}
.matching-list li {
	padding: 25px 30px;
	border-radius: 10px;
	color: #333333;
	font-size: 16px;
	cursor: pointer;
}
.matching-list li:nth-child(2n + 1) {
	background: #f7f7f7;
}
.matching-list li .line1 {
	font-weight: bold;
	font-size: 22px;
	margin-bottom: 20px;
}
.matching-list li .line2 {
	margin-bottom: 10px;
}
.matching-list li .line3 {
	margin-bottom: 10px;
	overflow: hidden;
}
.matching-list li .line4 {
	overflow: hidden;
}
.matching-list li .line1 .star {
	color: #ffd34c;
	font-size: 30px;
	float: right;
	cursor: pointer;
}
.matching-list li .line1 .star2 {
	color: #ffd34c;
	font-size: 30px;
	float: right;
	cursor: pointer;
}
</style>
